<script setup lang="ts">
  import { requestGuess } from '@/service'
  import { useSessionStore } from '@/store/session'
  import { onMounted, reactive } from 'vue'
  import sendMessage from "@/plugins/message.ts";
  // 分页
  const paging = reactive({
    current: 1,
    size: 5,
    pages: 0,
    total: 0,
    list: [
      {
        kmId: '',
        kmName: '',
      },
    ],
  })
  onMounted(() => {
    fetch()
  })
  async function fetch() {
    const session = useSessionStore()
    const result: any = await requestGuess({
      configId: session.configId,
      current: paging.current,
      size: paging.size,
    })
    if (result.code === 0) {
      paging.total = result.data.total
      paging.pages = result.data.pages
      paging.list = result.data.records
    }
  }
  function handleChange(e) {
    paging.current = e + 1
    fetch()
  }
  function handleSendMessage(value:any) {
    sendMessage(value, () =>{})
  }
</script>

<template>
  <div
    class="w-full md:w-[76%] px-2 pb-3 h-auto rounded-md bg-white flex flex-col justify-start"
  >
    <div
      class="w-full text-left md:text-[18px] text-[22px] py-2 pl-2 text-[#48a3ff]"
    >
      猜你想问
    </div>
    <van-swipe
      :show-indicators="false"
      :stop-propagation="false"
      :loop="false"
      @change="handleChange"
    >
      <van-swipe-item v-for="page in paging.pages" :key="page">
        <van-cell-group>
          <van-cell
            class="md:text-sm text-lg pl-2 text-left"
            v-for="item in paging.list"
            :key="item.kmId"
            :title="item.kmName"
            is-link
            @click.stop="handleSendMessage(item.kmName)"
          />
        </van-cell-group>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<style scoped></style>
